<html>
    <head>
        <title>具名插槽的缩写</title>
    </head>
    <body>
        <script>
            // 具名插槽的缩写
                    /*
                        根 v-on 、v-bind 一样， v-slot 也有缩写，即为 "#" 。
                    */
                                // 例如， v-slot:header 可以缩写为 #header
                                /*
                                    <base-layout>
                                        <template #header>
                                            <h1>Here might be a page title</h1>
                                        </template>

                                        <p> A paragraph for the main context</p>
                                        <p> And another one</p>

                                        <template #footer>
                                            <p>Here's some contact info</p>
                                        </template>
                                    </base-layout>
                                */

                    // 然而，和其他指令一样，该缩写只在其有参数的时候才可用。这意味着以下语法是无效的：
                                /*
                                    --这会触发一个警告,("具名插槽的缩写"不能和"默认插槽缩写"一起使用)--
                                    <current-user #="{user}">
                                        {{ user.firstName }}
                                    </current-user>
                                */

                            // 如果你希望在默认插槽中也使用具名插槽缩写，那默认插槽就要显示指定插槽名称：
                                /*
                                    <current-user #default="{user}">
                                        {{ user.firstName}}
                                    </current-user>
                                */

        </script>
    </body>
</html>